<html>
    <head>
		<style type="text/css">
		<!--
		BODY { 
		background-image: url('hall.jpg'); 
			background-repeat: no-repeat; 
		}
		-->
		</style>
        <title>iDigi Web Demo using Google appspot technology</title>

        <meta name="viewport" content="width=device-width; 
            initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta names="apple-mobile-web-app-status-bar-style" 
         content="black-translucent" />
        
        <script src="http://www.google.com/jsapi?key=ABQIAAAA1Vvq5pLyw5IAAQQtCIurLhSCGfxgLuOmAJcC-OBbFOMYrpib_BSypK7Qf_9YkaT-2SzpuOBRKp6Bqw" type="text/javascript"></script>
        <script type="text/javascript">
          google.load("jquery", "1.3.2");
        </script>
        <script type="text/javascript">

          // Request that the application go and fetch new gauge values from
          // iDigi
          function request_update() {
            $("#status").html("Requesting early sensor update...");
            $.ajax({
                type: 'GET',
                url: '/update',
                timeout: 12000,
                success: function(data) {
                  $("#status").html('');
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                  $("#status").html('Timeout updating ' + sn + '...');
                }
            });
          }
                  
          function set_LED(onoff,n) {
            //$("#status").html("Turning LED" + n + " " + onoff)
			$("#status").html("/led?onoff=" + onoff + "&chan=" + n)
            $.ajax({
                type: 'GET',
                url: '/led?onoff=' + onoff + '&chan=' + n,
                timeout: 5000,
                success: function(data) {
                  $("#status").html('Requesting live sensor data in 5 seconds.');
                  // Wait 5 sec then request the GAE app get new data from iDigi
                  window.setTimeout(request_update, 5000);
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                  $("#status").html('Timeout setting SmartPlug');
                }
            });
          }
		  
		  function set_led_im(lnum) {
            //$("#status").html("Turning LED" + n + " " + onoff)
			$("#status").html("/ledim?chan=" + lnum)
            $.ajax({
                type: 'GET',
                url: '/ledim?chan=' + lnum,
                timeout: 5000,
                success: function(data) {
                  $("#status").html('Requesting live sensor data in 5 seconds.');
                  // Wait 5 sec then request the GAE app get new data from iDigi
                  window.setTimeout(request_update, 5000);
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                  $("#status").html('Timeout setting SmartPlug');
                }
            });
          }
		  
		  function update_led(lnum) {
            //$("#status").html("Turning LED" + n + " " + onoff)
			$("#status").html("Updating led" + lnum)
            $.ajax({
                type: 'GET',
                url: '/upled?chan=' + lnum,
                timeout: 5000,
                success: function(data) {
                  $("#status").html('Requesting live sensor data in 5 seconds.');
                  // Wait 5 sec then request the GAE app get new data from iDigi
                  window.setTimeout(request_update, 5000);
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                  $("#status").html('Timeout setting SmartPlug');
                }
            });
          }
            
          function update_gauge(div, sn, cn) {
            $("#status").html("Updating " + sn + "...");
            $.ajax({
                type: 'GET',
                url: '/gauge?name=' + cn,
                timeout: 5000,
                success: function(data) {
                  $(div).html(data);
                  $("#status").html('');
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                  $("#status").html('Timeout updating gauge.');
                }
            });
          }
          
          function update() {
            update_gauge('#light', 'light', 'xbr0.light');
            update_gauge('#temperature', 'temperature',
                            'xbr0.temperature');
            update_gauge('#led', 'led', 'xbib0.led1');
			update_gauge('#light2', 'light2', 'xbr1.light');
            update_gauge('#temperature2', 'temperature2',
                            'xbr1.temperature');
			update_gauge('#led2', 'led2', 'xbib0.led2');				
			update_gauge('#light3', 'light3', 'sensor0.light');
            update_gauge('#temperature3', 'temperature3',
                            'sensor0.temperature');
			update_gauge('#led3', 'led3', 'xbib0.led3');
			update_gauge('#light4', 'light4', 'sensor0.light');
            update_gauge('#temperature4', 'temperature4',
                            'sensor0.temperature');
			update_gauge('#led4', 'led4', 'xbib0.led3');
			update_led('1');
            window.setTimeout(update, 10000);
          }
          
          $(document).ready(function(){
            $("#set_led_on").click(function() { set_LED("On",1); });
            $("#set_led_off").click(function() { set_LED("Off",1); });
			$("#set_led_on2").click(function() { set_LED("On",2); });
            $("#set_led_off2").click(function() { set_LED("Off",2); });
			$("#set_led_on3").click(function() { set_LED("On",3); });
            $("#set_led_off3").click(function() { set_LED("Off",3); });
			$("#led_img1").click(function() { set_led_im("1"); });
            $("#request_update").click(function() { request_update(); });
            update()
          });
          
        </script>       
    </head>
    
	<body>
        <div style="width: 960px;">
            <div style="float: left; width: 960px; height: 120px;" >
            </div>
			<div style="float: left; width: 180px; height: 64px;" >
            </div>
            <div style="float: left; width: 128px; height: 64px;" >
                <div id="light"></div>
			</div>	
			<div style="float: left; width: 128px; height: 64px;" >
                <div id="light2"></div>
			</div>
			<div style="float: left; width: 64px; height: 64px;" >            
			</div>
			<div style="float: left; width: 128px; height: 64px;" >
                <div id="light3"></div>
			</div>
			<div style="float: left; width: 128px; height: 64px;" >
                <div id="light4"></div>
			</div>
                      
            <div style="clear: both"></div>
        </div>
		
		<div style="wight: left;  width: 960px; height: 100px;" >
        </div>
		
		<div>      
            <a>LED_IMG</a>
			<div style="width: 960px; height: 64px;">
				<div style="float: left; width: 184px; height: 64px;" >
				</div>
                <div style="float: left; width: 128px; height: 64px;" >            
					<div id="led_img1" ></div>
				</div>
				<div style="float: left; width: 128px; height: 64px;" >            
					<div id="led_img2" ></div>
				</div>
				
				<div style="float: left; width: 64px; height: 64px;" >            
				</div>
				
				<div style="float: left; width: 128px; height: 64px;" >            
					<div id="led_img3" ></div>
				</div>
				<div style="float: left; width: 128px; height: 64px;" >            
					<div id="led_img4" ></div>
				</div>
				<div style="clear: both"></div>
            </div>
		</div>
		
        <div>      
            <a>LEDS</a>
			<div style="width: 960px; height: 64px;">
				<div style="float: left; width: 184px; height: 64px;" >
				</div>
                <div style="float: left; width: 128px; height: 64px;" >            
					<div id="led" ></div>
				</div>
				<div style="float: left; width: 128px; height: 64px;" >            
					<div id="led2" ></div>
				</div>
				
				<div style="float: left; width: 64px; height: 64px;" >            
				</div>
				
				<div style="float: left; width: 128px; height: 64px;" >            
					<div id="led3" ></div>
				</div>
				<div style="float: left; width: 128px; height: 64px;" >            
					<div id="led4" ></div>
				</div>
				<div style="clear: both"></div>
            </div>
		</div>
		
		<div style="width: 960px;">
				<div style="float: left; width: 184px; height: 64px;" >
				</div>
                <div style="float: left; width: 128px; height: 64px;"
                     align="center">            
                    <p style="font-size: 8pt;">
                        <u>Switch LEDt</u><br/>
                        <a id="set_led_on" href="#">On</a>
                        <a id="set_led_off" href="#">Off</a>
                    </p>
                    <p style="font-size: 8pt;">
                        <u>Interface Functions</u><br/>
                        <a id="request_update" href="#">Request Update</a>
                    </p>                       
                </div>
				
				<div style="float: left; width: 128px; height: 64px;"
                     align="center">            
                    <p style="font-size: 8pt;">
                        <u>Switch LED2</u><br/>
                        <a id="set_led_on2" href="#">On</a>
                        <a id="set_led_off2" href="#">Off</a>
                    </p>
                    <p style="font-size: 8pt;">
                        <u>Interface Functions</u><br/>
                        <a id="request_update" href="#">Request Update</a>
                    </p>                       
                </div>
				
				<div style="float: left; width: 64px; height: 64px;" >            
				</div>
				
				<div style="float: left; width: 128px; height: 64px;"
                     align="center">            
                    <p style="font-size: 8pt;">
                        <u>Switch LED3</u><br/>
                        <a id="set_led_on3" href="#">On</a>
                        <a id="set_led_off3" href="#">Off</a>
                    </p>
                    <p style="font-size: 8pt;">
                        <u>Interface Functions</u><br/>
                        <a id="request_update" href="#">Request Update</a>
                    </p>                       
                </div>
				
				<div style="float: left; width: 128px; height: 64px;"
                     align="center">            
                    <p style="font-size: 8pt;">
                        <u>Switch LED4</u><br/>
                        <a id="set_led_on" href="#">On</a>
                        <a id="set_led_off" href="#">Off</a>
                    </p>
                    <p style="font-size: 8pt;">
                        <u>Interface Functions</u><br/>
                        <a id="request_update" href="#">Request Update</a>
                    </p>                       
                </div>
				
                <div style="clear: both"></div>
		</div>	
        
        <div style="wight: left;  width: 960px; height: 12px;" >
        </div>
		<div>
			<P>Temperature</P>
			<div style="float: left; width: 184px; height: 64px;" >
				</div>
			<div style="float: left; width: 128px; height: 64px;">
                <div id="temperature"></div>
            </div>
			<div style="float: left; width: 128px; height: 64px;">
                <div id="temperature2"></div>
            </div>
			
			<div style="float: left; width: 64px; height: 64px;" >            
				</div>
			
			<div style="float: left; width: 128px; height: 64px;">
                <div id="temperature3"></div>
            </div>
			<div style="float: left; width: 128px; height: 64px;">
                <div id="temperature4"></div>
            </div>
			<div style="clear: both"></div>
		</div>
		
        <div>
            <div id="status"></div>
        </div>
    </body>
	
</html>
